import React, {FC} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Linking,
} from 'react-native';
import icon_unselected from '../../../assets/icon_unselected.png';
import icon_selected from '../../../assets/icon_selected.png';

type PropsType = {
  checked: boolean;
  setChecked: (value: boolean) => void;
};

const RadioProtocol: FC<PropsType> = (props: PropsType) => {
  const {checked, setChecked} = props;
  return (
    <View style={styles.protocolLayout}>
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => setChecked(!checked)}>
        <Image
          source={checked ? icon_selected : icon_unselected}
          style={styles.radioImg}
        />
      </TouchableOpacity>
      <Text style={styles.labelTxt}>
        我已阅读并同意
        <Text
          style={styles.protocolTxt}
          onPress={() => {
            Linking.openURL('https://www.baidu.com/');
          }}>
          《用户写协议》和《隐私协议》《儿童/青少年个人信息保护规则》《中国移动认证服务条款》
        </Text>
      </Text>
    </View>
  );
};
const styles = StyleSheet.create({
  protocolLayout: {
    width: '100%',
    flexDirection: 'row',
  },
  radioImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  labelTxt: {
    fontSize: 12,
    color: '#999',
    marginLeft: 6,
  },
  protocolTxt: {
    fontSize: 12,
    color: '#1020ff',
  },
});
export default RadioProtocol;
